.rq-custom-btn.ant-btn {
  & > span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
  }

  &:disabled {
    color: var(--requestly-color-text-subtle) !important;
    background: var(--requestly-color-white-t-10) !important;
  }

  .rq-custom-btn-hotkey-text {
    display: inline-flex;
    height: 20px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: rgba(255, 255, 255, 0.6);

    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size-xs, 11px);
    line-height: var(--line-height-xs, 15px);
  }

  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;

  text-align: center;
  color: var(--requestly-color-text-default, #fff);
  font-style: normal;
  font-family: var(--requestly-font-family-default, Inter);
  font-weight: var(--requestly-font-weight-medium);
  border-radius: 4px;

  height: 32px;
  padding: var(--space-0, 0px) var(--space-5, 12px);
  font-size: var(--requestly-font-size-sm, 13px);
  line-height: var(--requestly-font-line-height-sm, 20px);

  border: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
  background: var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));

  & > .anticon + span,
  & > span + .anticon {
    margin-left: 0;
  }

  &:disabled {
    color: var(--requestly-color-text-subtle, #bbb);
    background: var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
  }

  &.icon-only-btn {
    width: 32px;
    height: 32px;
    padding: var(--space-0, 0px) var(--space-4, 8px);
    flex-shrink: 0;
  }

  &.ant-btn-default {
    height: 32px;
    padding: var(--space-0, 0px) var(--space-5, 12px);
    font-size: var(--requestly-font-size-sm, 13px);
    line-height: var(--requestly-font-line-height-sm, 20px);

    border: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
    background: var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));

    &:hover {
      background: var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }

    &:active {
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }

    svg,
    img {
      flex-shrink: 0;
      color: inherit;
      width: 16px;
      height: 16px;
    }
  }

  &.ant-btn-sm {
    height: 24px;
    padding: var(--space-0, 0px) var(--space-4, 8px);
    font-size: var(--requestly-font-size-xs, 11px);
    line-height: var(--requestly-font-line-height-xs, 15px);

    svg,
    img {
      flex-shrink: 0;
      color: inherit;
      width: 14px;
      height: 14px;
    }

    &.icon-only-btn {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
  }

  &.ant-btn-lg {
    height: 40px;
    padding: var(--space-0, 0px) var(--space-6, 16px);
    font-size: var(--requestly-font-size-md, 15px);
    line-height: var(--requestly-font-line-height-md, 23px);
    gap: 8px;

    & > span {
      gap: 8px;
    }

    svg,
    img {
      flex-shrink: 0;
      color: inherit;
      width: 20px;
      height: 20px;
    }

    &.icon-only-btn {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
    }
  }

  &.ant-btn-primary {
    background: var(--requestly-color-primary, #004eeb);
    border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));

    &:hover {
      background: var(--requestly-color-primary-soft, #3c7ff3);
    }

    &:active {
      border-radius: 4px;
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
      background: var(--requestly-color-primary-dark, #002ca9);
    }
  }

  &.ant-btn-ghost {
    border: none;
    background: transparent;
    color: var(--requestly-color-text-default, #fff);
    &:hover {
      background: var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }

    &:active {
      background: var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
    }
  }

  &.ant-btn-danger {
    color: var(--requestly-color-text-default, #fff);
    background: var(--requestly-color-error, #e43434);
    border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));

    &:hover {
      background: var(--requestly-color-error-soft, #f95e5e);
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }

    &:active {
      background: var(--requestly-color-error-dark, #a41f1f);
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }
  }

  &.ant-btn-warning {
    color: var(--requestly-color-black, #000);
    background: var(--requestly-color-warning, #e09400);
    border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));

    &:hover {
      background: var(--requestly-color-warning-soft, #f2aa09);
      border: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
    }

    &:active {
      background: var(--requestly-color-warning-dark, #b55e0f);
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }
  }
}
